<template>
    <div class="main-view" @dragend="doReset()">

        <!-- 预定义的元素 -->
        <div class="element view">
            <ul>

                <!-- 通知 -->
                <li draggable="true" @dragstart="updateDragItem(notifyFactory())">
                    <ElNotify :title="initNotify.title.value" :content="initNotify.content.value" :top="0"
                        :bgcolor="initNotify.bgcolor.value" :color="initNotify.color.value"></ElNotify>
                </li>

                <!-- 金刚区 -->
                <li draggable="true" @dragstart="updateDragItem(vajraFactory())">
                    <ElVajra :width="initVajra.width.value" :color="initVajra.color.value" :btns="initVajra.btns.value"
                        :top="0" :bgcolor="initVajra.bgcolor.value"></ElVajra>
                </li>

                <!-- 图片 -->
                <li draggable="true" @dragstart="updateDragItem(imageFactory())">
                    <ElImage :src="initImage.src.value" :width="initImage.width.value" :top="0">
                    </ElImage>
                </li>

            </ul>

            <div class="title">
                模块资源池
            </div>
        </div>

        <!-- 手机视图 -->
        <div class="iPhone13" @click="updateConfigItem(-1)">
            <div class="view" @dragover.prevent @drop.prevent="updateItem()" @dragenter="updateDropItem(-1)" :class="{
        active: configIndex == -1
    }" :style="{
        backgroundColor: pageConfig.bgcolor
    }">
                <div v-for="(item, index) in pageInfo" :key="index" @dragenter.stop="updateDropItem(index)">
                    <div class="item" :class="{
        unactive: configIndex != index,
        active: configIndex == index,
        hover: currentTarget == index,
        leave: leaveSource == index
    }" @dragover.prevent @click.stop="updateConfigItem(index)">

                        <span draggable="true" @dragstart="changeItemPosition(index)">

                            <!-- 图片 -->
                            <ElImage v-if="item.__type__ == 'image'" :src="item.src.value" :width="item.width.value"
                                :top="item.top.value">
                            </ElImage>

                            <!-- 通知 -->
                            <ElNotify v-if="item.__type__ == 'notify'" :title="item.title.value"
                                :content="item.content.value" :top="item.top.value" :bgcolor="item.bgcolor.value"
                                :color="item.color.value">
                            </ElNotify>

                            <!-- 金刚区 -->
                            <ElVajra v-if="item.__type__ == 'vajra'" :width="item.width.value" :top="item.top.value"
                                :bgcolor="item.bgcolor.value" :btns="item.btns.value" :color="item.color.value">
                            </ElVajra>

                        </span>

                    </div>
                </div>
            </div>
        </div>

        <!-- 修改配置 -->
        <div class="config view">
            <div class="title">
                修改配置
            </div>

            <!-- 配置单个元素位置 -->
            <div class="content" v-if="configIndex != -1">
                <div class="item" v-for="keyname in pageInfo[configIndex].__sort__" :key="keyname">
                    <div class="label">
                        {{ pageInfo[configIndex][keyname].name }}：
                    </div>
                    <div class="value">

                        <!-- 字符串 -->
                        <input type="text" v-if="pageInfo[configIndex][keyname].type == 'string'"
                            v-model="pageInfo[configIndex][keyname].value">

                        <!-- 数字 -->
                        <input type="number" v-if="pageInfo[configIndex][keyname].type == 'number'"
                            v-model="pageInfo[configIndex][keyname].value">

                        <!-- 颜色 -->
                        <div class="color" v-if="pageInfo[configIndex][keyname].type == 'color'">
                            <input type="color" class="btn" v-model="pageInfo[configIndex][keyname].value">
                            {{ pageInfo[configIndex][keyname].value }}
                        </div>

                    </div>
                </div>

            </div>

            <!-- 配置主体界面 -->
            <div class="content" v-else>

                <div class="item">
                    <div class="label">
                        背景色：
                    </div>
                    <div class="value">
                        <div class="color">
                            <input type="color" class="btn" v-model="pageConfig.bgcolor">
                            {{ pageConfig.bgcolor }}
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
</template>

<script setup lang="ts">

import ElImage from "./element/image/index.vue"
import ElNotify from "./element/notify/index.vue"
import ElVajra from "./element/vajra/index.vue"

import imageFactory from "./element/image/index"
import notifyFactory from "./element/notify/index"
import vajraFactory from "./element/vajra/index"

let initImage = imageFactory()
let initNotify = notifyFactory()
let initVajra = vajraFactory()

import { ref } from "vue"

let pageInfo = ref<Array<any>>([
    imageFactory({
        src: "./4.jpeg"
    }),
    notifyFactory({
        bgcolor: "#ebdbda"
    }),
    vajraFactory(),
    imageFactory({
        src: "./3.jpeg"
    })
]);
let pageConfig = ref({
    bgcolor: "#f8f8f8"
});

// 标记需要添加的楼层类型
let currentSource = {};
let updateDragItem = (flag: Object) => {
    currentSource = flag;
};

// 标记目标更新位置
let currentTarget = ref(-1);
let updateDropItem = (flag: number) => {
    currentTarget.value = flag;
};

// 标记需要迁出的位置
let leaveSource = ref(-1);
let changeItemPosition = (index: number) => {
    leaveSource.value = index;
};

// 更新楼层
let updateItem = () => {

    // 添加
    if (currentSource) {
        if (currentTarget.value == -1) {
            pageInfo.value.push(currentSource);
        } else {
            pageInfo.value.splice(currentTarget.value + 1, 0, currentSource);
        }
        currentSource = "";
    }

    // 移动
    else if (leaveSource.value != -1) {
        if (currentTarget.value == -1) {
            currentTarget.value = pageInfo.value.length - 1;
        }

        pageInfo.value.splice(currentTarget.value, 0, pageInfo.value.splice(leaveSource.value, 1)[0]);
        leaveSource.value = -1;
    }

    currentTarget.value = -1;
};

// 更新配置视图
let configIndex = ref(-1);
let updateConfigItem = (index: number) => {
    configIndex.value = index;
};

let doReset = () => {
    leaveSource.value = -1;
    currentTarget.value = -1;
};

</script>

<style lang="scss" scoped>

.main-view {
    font-family: monospace;
    height: 100vh;

    &>.view {
        position: fixed;
        top: 10px;
        border-radius: 10px;
        overflow: auto;

        &.element {
            left: 10px;
            max-height: calc(133vh - 26.7px);
            width: 395px;
            transform: scale(0.75);
            transform-origin: left top;
            background-color: #f8f8f8;
            outline: 2px solid black;

            &>.title {
                left: 0;
                bottom: 0;
                background-color: black;
                color: white;
                padding: 10px;
                border-radius: 10px 10px 0 0;
                font-size: 18px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                display: inline-block;
            }

            &>ul {
                user-select: none;

                &>li {
                    margin: 10px;
                    cursor: move;
                    padding: 10px 0;
                    position: relative;

                    &::before {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(255, 255, 255, 0);
                        display: inline-block;
                        left: 0;
                        top: 0;
                        content: " ";
                    }

                    &:hover {
                        outline: 1px dashed gray;
                    }
                }
            }
        }

        &.config {
            right: 10px;
            max-height: calc(100vh - 20px);
            width: 300px;
            border: 2px solid #d7dfeb;

            &>.title {
                font-size: 14px;
                text-align: center;
                color: #ffffff;
                background-color: #d7dfeb;
                display: inline-block;
                border-radius: 0 0 10px 10px;
                padding: 5px 10px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }

            &>.content {
                margin-top: 20px;
                padding-left: 20px;

                &>.item {
                    display: flex;
                    align-items: center;
                    height: 50px;

                    &:not(:last-child) {
                        border-bottom: 1px solid rgb(239, 239, 239);
                    }

                    &>.label {
                        color: #5E5E5E;
                    }

                    &>.value {
                        flex-grow: 1;
                        padding-right: 30px;
                        display: flex;
                        justify-content: flex-end;

                        &>input {
                            width: 100%;
                            height: 30px;
                            outline: none;
                            border: none;
                            text-align: right;
                        }

                        &>.color {
                            display: flex;
                            align-items: center;

                            &>input {
                                background-color: transparent;
                                padding: 0;
                                border: none;
                                outline: none;
                                cursor: pointer;
                                margin-right: 5px;
                                width: 30px;
                                height: 30px;
                            }
                        }
                    }
                }
            }
        }
    }

    &>.iPhone13 {
        background-image: url("./images/iPhone13.png");
        box-sizing: content-box;
        display: inline-block;
        background-size: 100% auto;
        padding: 48px 15px 52px 13px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(0.8);
        user-select: none;
        z-index: 1;

        &>.view {
            width: 375px;
            height: 716px;
            background-position: center center;
            overflow: auto;
            position: relative;

            &.active {
                outline: 1px solid red;
            }

            .item {
                position: relative;

                &.active>span>* {
                    outline: 1px solid red;
                }

                &.hover>span>* {
                    outline: 1px dashed red;
                }

                &.leave>span>* {
                    opacity: 0.3;
                }

                &.unactive>span::before {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(255, 255, 255, 0);
                    display: inline-block;
                    left: 0;
                    top: 0;
                    content: " ";
                }
            }
        }
    }
}
</style>